<template>
  <div class="user-manager">
    <div class="query-form">
      <el-form ref="form" :inline="true" :model="queryForm">
        <el-form-item label="状态" prop="state">
          <el-select v-model="queryForm.applyState" placeholder="状态">
            <el-option value="" label="全部"></el-option>
            <el-option :value="1" label="待审批"></el-option>
            <el-option :value="2" label="审批中"></el-option>
            <el-option :value="3" label="审批拒绝"></el-option>
            <el-option :value="4" label="审批通过"></el-option>
            <el-option :value="5" label="作废"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getApplyList">查询</el-button>
          <el-button type="" @click="handleReset('')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="handleApply">申请休假</el-button>
      </div>
      <el-table
          :data="applyList"
          style="width: 100%"
      >
        <!--        <el-table-column type="selection"/>-->
        <el-table-column
            v-for="item in columnList"
            :key="item.prop"
            :formatter="item.formatter"
            :label="item.label"
            :prop="item.prop"
        />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button
                size="mini"
                @click="handleDetail(scope.row)"
            >查看
            </el-button
            >
            <el-button
                type="danger"
                size="mini"
                v-if="[1, 2].includes(scope.row.applyState)"
                @click="handleDelete(scope.row._id)"
            >作废
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-size="pager.pageSize"
          :total="pager.total"
          background
          class="pagination"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog
        title="休假申请"
        v-model="showModal"
        width="50%" :before-close="handleClose">
      <el-form
          ref="dialogForm"
          :model="leaveForm"
          label-width="120px"
          :rules="rules"
      >
        <el-form-item label="休假类型" prop="applyType" required>
          <el-select v-model="leaveForm.applyType" placeholder="请选择">
            <el-option label="事假" :value="1"></el-option>
            <el-option label="调休" :value="2"></el-option>
            <el-option label="年假" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="休假时间" required>
          <el-row>
            <el-col :span="11">
              <el-form-item prop="startTime" required>
                <el-date-picker
                    v-model="leaveForm.startTime"
                    type="date"
                    placeholder="选择开始日期"
                    @change="(val)=>handleDateChange('startTime', val)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="endTime" required>
                <el-date-picker
                    v-model="leaveForm.endTime"
                    type="date"
                    placeholder="选择结束日期"
                    @change="(val)=>handleDateChange('endTime', val)"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item prop="leaveTime" label="休假时长" required>
          {{ leaveForm.leaveTime }}
        </el-form-item>
        <el-form-item label="休假原因" prop="reasons" required>
          <el-input
              type="textarea"
              :row="3"
              placeholder="请输入休假原因"
              v-model="leaveForm.reasons"
          />
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSubmit"
            >确 定</el-button
            >
          </span>
      </template>
    </el-dialog>
    <!-- 查看详情弹框 -->
    <!--  destroy-on-close 疑似缓存的东西  -->
    <el-dialog
        title="申请休假详情"
        v-model="showDetailModal"
        width="50%"
        destroy-on-close>
      <el-steps
          :active="detail.applyState > 2 ? 3 : detail.applyState"
          align-center
      >
        <el-step title="待审批"></el-step>
        <el-step title="审批中"></el-step>
        <el-step title="审批通过/审批拒绝"></el-step>
      </el-steps>
      <el-form label-width="120px" label-suffix=":">
        <el-form-item label="休假类型">
          <div>{{ detail.applyTypeName }}</div>
        </el-form-item>
        <el-form-item label="休假时间">
          <div>{{ detail.time }}</div>
        </el-form-item>
        <el-form-item label="休假时长">
          <div>{{ detail.leaveTime }}</div>
        </el-form-item>
        <el-form-item label="休假原因">
          <div>{{ detail.reasons }}</div>
        </el-form-item>
        <el-form-item label="审批人">
          <div>{{ detail.curAuditUserName }}</div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import {getCurrentInstance, nextTick, onMounted, reactive, ref, toRaw} from "vue";
import utils from "../utils/utils";

const {proxy} = getCurrentInstance();
//搜索表单
const queryForm = reactive({
  applyState: 1,
});
//分页数据
const pager = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});


//table列头数据
const columnList = ref([
  {
    label: "单号",
    prop: "orderNo",
  },
  {
    label: "休假事件",
    prop: "",
    formatter(row) {
      return utils.formatDate(new Date(row.startTime), 'yyyy-MM-dd') + '到' + utils.formatDate(new Date(row.endTime), 'yyyy-MM-dd')
    }
  },
  {
    label: "休假时长",
    prop: "leaveTime",
  },
  {
    label: "休假类型",
    prop: "applyType", // 1：事假，2：调休，3：年假
    formatter(row, column, value) {
      return {1: "事假", 2: "调休", 3: "年假"}[value];
    },
  },
  {
    label: "休假原因",
    prop: "reasons",
  },
  {
    label: "申请时间",
    prop: "createTime",
    formatter(row, column, value) {
      return utils.formatDate(new Date(value));
    },
  },
  {
    label: "审批人",
    prop: "auditUsers",
  },
  {
    label: "当前审批人", //多个
    prop: "curAuditUserName",
  },
  {
    label: "审批状态",
    prop: "applyState",
    formatter(row, column, value) {
      // 1：待审批，2：审批中，3：审批拒绝，4：审批通过，5：作废
      return {1: "待审批", 2: "审批中", 3: "审批拒绝", 4: "审批通过", 5: "作废"}[value];
    },
  },
]);

// 表单校验规则
const rules = reactive({
  startTime: [{type: "date", required: true, message: "请输入开始日期", trigger: "change"}],
  endTime: [{type: "date", required: true, message: "请输入结束日期", trigger: "change"}],
  reasons: [{required: true, message: "请输入休假原因", trigger: ["change", "blur"]}],
})

//获取form ref
const form = ref(null);

//获取新增表单 ref
const dialogForm = ref(null);

// 申请休假弹框
const leaveForm = reactive({
  applyType: 1, // 休假类型
  startTime: '', // 开始时间
  endTime: '', // 结束时间
  leaveTime: '0天', // 休假天数
  reasons: '', // 休假原因
})

// 申请休假dialog
const showModal = ref(false)
// 休假详情
const showDetailModal = ref(false)

// create:创建  delete:作废
const action = ref("create")

// 点击申请休假-展示弹框
const handleApply = () => {
  showModal.value = true
  action.value = "create"
}

// 取消申请
const handleClose = () => {
  showModal.value = false
  handleReset('dialogForm')
}

//重置表单
const handleReset = (form) => {
  if (form) {
    return proxy.$refs[form].resetFields();
  }
  queryForm.applyState = null
  getApplyList();
};

// 提交申请
const handleSubmit = () => {
  // 提交表单前先校验
  proxy.$refs.dialogForm.validate(async (valid) => {
    if (valid) {
      try {
        let params = {...leaveForm, action: action.value};
        let res = await proxy.$api.leaveOperate(params);
        proxy.$message.success("创建成功");
        handleClose();
        getApplyList();
      } catch (error) {
      }
    }
  });
}

// 计算休假时长
const handleDateChange = (key, val) => {
  let {startTime, endTime} = leaveForm;
  if (!startTime || !endTime) return;
  if (startTime > endTime) {
    proxy.$message.error("开始日期不能晚于结束日期");
    leaveForm.leaveTime = "0天"
    // setTimeout(() => {
    //   leaveForm[key] = "";
    // }, 0)
    nextTick(() => {
      leaveForm[key] = "";
    })
  } else {
    console.log((endTime - startTime))
    leaveForm.leaveTime = ((endTime - startTime) / (24 * 60 * 60 * 1000) + 1) + '天'
  }
}

//页码切换调用方法
const handleCurrentChange = (current) => {
  pager.pageNum = current;
};

// 休假申请列表
const applyList = ref([])
// 休假申请查询
const getApplyList = async () => {
  const params = {...queryForm, ...pager}
  const {list, page} = await proxy.$api.getApplyList(params)
  applyList.value = list
  pager.total = page.total
}

// 查看
const handleDetail = (row) => {
  let data = {...row};
  // "applyType":1,//申请类型  1:事假 2：调休 3:年假
  data.applyTypeName = {
    1: "事假",
    2: "调休",
    3: "年假",
  }[data.applyType];
  data.time =
      utils.formatDate(new Date(data.startTime), "yyyy-MM-dd") +
      "到" +
      utils.formatDate(new Date(data.endTime), "yyyy-MM-dd");
  // 1:待审批 2:审批中 3:审批拒绝 4:审批通过 5:作废
  data.applyStateName = {
    1: "待审批",
    2: "审批中",
    3: "审批拒绝",
    4: "审批通过",
    5: "作废"
  }[data.applyState]
  detail.value = data;
  showDetailModal.value = true;
}
// 作废
const handleDelete = async (_id) => {
  try {
    let params = {_id, action: "delete"};
    let res = await proxy.$api.leaveOperate(params);
    proxy.$message.success("删除成功");
    getApplyList();
  } catch (error) {
  }
}

onMounted(() => {
  getApplyList()
})
</script>
<style lang="scss" scoped></style>
